<!--
 * @Author: 庄东东
 * @Date: 2021-09-01 16:16:39
 * @LastEditTime: 2021-09-02 09:17:40
 * @LastEditors: 庄东东
 * @Description: 
 * @FilePath: \romance\src\components\picker.vue
-->
<template>
  <div class="picker">
    <van-popup v-model:show="isShow" position="bottom" :before-close="close">
      <van-area
        v-if="type === 'area'"
        title="地址"
        :area-list="areaList"
        :columns-num="2"
        @confirm="onConfirm"
        @cancel="isShow = false"
      />
      <van-picker
        v-else
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="isShow = false"
      />
    </van-popup>
  </div>
</template>

<script lang="ts">
import { areaList } from "@vant/area-data";
import { defineComponent, PropType, ref, watchEffect } from "vue";
import { Sex, Whether } from "../config/enum";
import age from "../config/age";
let sexType = ["男", "女"];
let whetherType = ["是", "否"];
export type t = "age" | "sex" | "whether" | "area";
export default defineComponent({
  props: {
    type: {
      type: String as PropType<t>,
      required: true
    },
    keyVal: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  emits: ["close"],
  setup(props, context) {
    let isShow = ref(props.show);
    let data = ref<string | number>();
    let columns = ref<(number | string)[]>([]);
    watchEffect(() => {
      isShow.value = props.show;
      if (props.type == "age") {
        columns.value = age;
      }
      if (props.type == "sex") {
        columns.value = sexType;
      }
      if (props.type == "whether") {
        columns.value = whetherType;
      }
    });

    let close = () => {
      context.emit("close", {
        data: data.value,
        type: props.type,
        keyVal: props.keyVal
      });
      return true;
    };
    let onConfirm = (e: any) => {
      if (props.type == "sex") {
        data.value = Sex[e];
      }
      if (props.type == "whether") {
        data.value = Whether[e];
      }
      data.value = e;
      close();
    };
    return {
      onConfirm,
      close,
      isShow,
      columns,
      areaList
    };
  }
});
</script>

<style lang="less" scoped></style>
